<template>
	<div class="header">
		<div style="width: 45%;">
			<img v-if="h == null" src="../../../assets/img/mobile/origin.webp" />
			<img class="gouser" v-if="h != null" @click="goUser()"
				:src="`http://127.0.0.1/api/public/showimg/${this.$store.state.pic}`" />
			<router-link to="/pc/home">
				<el-link style="color: black; width: 40%;" type="info" :underline="false">
					首页
				</el-link>
			</router-link>
		</div>

		<div style="width: 200px;">
			<p style="font-size: 15px; width: 100px; text-align: right; padding-top: 9px;">欢迎光临！</p>
			<el-popover placement="top" width="300" v-model="visible">
				<h3 style="text-align: center;">用户登录</h3>
				<hr>
				<el-input style="margin-top: 10px;" v-model="user.username" placeholder="账号"></el-input>
				<el-input show-password style="margin-top: 20px;" v-model="user.password" placeholder="密码"></el-input>
				<div style="text-align: center;ght: 50px;">
					<el-button style="width: 100%; height: 40px; margin-top: 20px; font-size: 18px;" type="primary"
						size="mini" @click="login()">登录</el-button>
				</div>
				<div style="display: flex; justify-content: space-between; margin-top: 10px">
					<el-link type="primary" :underline="false">忘记密码</el-link>
					<el-link type="primary" :underline="false">
						<router-link to="/pc/register" style="color: black;">用户注册</router-link>
					</el-link>
				</div>
				<el-button class="login" slot="reference" v-show="h == null">请登录</el-button>
			</el-popover>
			<el-button class="login" v-show="h != null" style="width: 60px;"
				@click="goUser()">{{this.$store.state.name}}</el-button>
		</div>

		<div style="width: 400px; white-space: nowrap;" v-if="this.$store.state.role != 'adm'">
			<router-link class="discoloration" style="margin-left: 10%; overflow: hidden;" to="/pc/register">免费注册</router-link>
			<router-link class="discoloration" to="/pc/mycart">我的购物车</router-link>
			<router-link class="discoloration" to="/pc/order">我的订单</router-link>
		</div>
		<div style="width: 400px; white-space: nowrap;" v-if="this.$store.state.role == 'adm'">
			<router-link class="discoloration" style="margin-left: 10%; overflow: hidden;" to="/backendManage">后台首页</router-link>
		</div>
		<el-link class="out" type="info" :underline="false" @click="out()">退出</el-link>
	</div>
</template>

<script>
	import Vue from 'vue';
	import qs from 'qs'
	export default {
		data() {
			return {
				visible: false,
				user: {
					username: '',
					password: ''
				},
				h: null
			}
		},
		created() {
			let token = localStorage.getItem("token")
			if (token != null) {
				this.h = localStorage.getItem("token")
				this.$axios.get("/api/user/info", this.h).then((resp) => {
					this.$store.state.role = resp.data.data.role;
					this.$store.state.name = resp.data.data.name;
					this.$store.state.account = resp.data.data.account;
					this.$store.state.pic = resp.data.data.img;
					let now = new Date();
					let year = now.getFullYear();
					let month = now.getMonth() + 1;
					let day = now.getDate();
					this.today = year + "-" + month + "-" + day;
					this.$store.state.today = '';
					this.$store.state.today = this.today;
				})
			}
		},
		methods: {
			async login() {
				let kv = qs.stringify(this.user);
				let hs = null;
				try {
					await this.$axios.post("/api/login", kv).then((resp) => {
						let token = resp.data.data.token;
						window.localStorage.setItem("token", token);
						token = "Bearer " + token;
						hs = {
							headers: {
								'Authorization': token,
							}
						}
						this.$store.state.token = hs;
					})
					await this.$axios.get("/api/user/info", hs).then((resp) => {
						this.$store.state.role = resp.data.data.role;
						this.$store.state.name = resp.data.data.name;
						this.$store.state.account = resp.data.data.account;
						this.$store.state.pic = resp.data.data.img;
						let now = new Date();
						let year = now.getFullYear();
						let month = now.getMonth() + 1;
						let day = now.getDate();
						this.today = year + "-" + month + "-" + day;
						this.$store.state.today = '';
						this.$store.state.today = this.today;
						this.h = hs;
					})
					Vue.prototype.$message({
						message: '登录成功',
						type: 'success'
					});
				} catch (error) {
					Vue.prototype.$message.error('登录失败');
				} finally {
					this.user = {
						username: '',
						password: ''
					}
					this.visible = false;
				}
				if (this.$store.state.role == 'adm' && this.h != null) {
					this.$router.push({
						path: '/backendManage'
					});
				}
			},
			out() {
				window.localStorage.clear();
				this.$store.state.token = null;
				this.$store.state.role = null;
				this.$store.state.name = null;
				this.$store.state.account = null;
				this.$store.state.pic = null;
				this.h = null;
				if (this.$route.path != '/pc/home') {
					this.$router.push('/pc/home');
				}
			},
			goUser() {
				this.$router.push('/pc/update/updatepwd');
			}
		},
	}
</script>

<style scoped>
	.header {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		background: linear-gradient(#d6d6d6, #f3f3f3);
	}

	.header .gouser:hover {
		cursor: pointer;
	}

	.header div {
		display: flex;
		text-align: center;
		height: 100%;
	}

	.header img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-left: 5%;
	}

	.header .login {
		height: 100%;
		width: 100%;
		border: 0;
		/* outline: none; */
		background-color: transparent;
		padding-left: 0px;
	}

	.header a {
		height: 100%;
		width: 25%;
		color: black;
		line-height: 100%;
	}

	.header .discoloration {
		 height: 40px; 
		 line-height: 40px;
		overflow: hidden;
	}

	.header .discoloration:hover {
		color: #f13f20;
	}

	.header .out {
		height: 100%;
		width: 15%;
	}
</style>